
import React from "react";

// jsx 是facebook发明的一种写法，用来充当组件的视图
// 在vue中，叫模板
// 上面的写的jsx，其实是一个语法糖
// let box = (
//   <div>
//     <h1>Hello React~</h1>
//   </div>
// )

// 组件名首字母必须大写
// function DemoA() {
//   // React.createElement() 返回一个react元素（jsx元素）
//   return React.createElement('div', {}, [
//     React.createElement('h1', { key: 1 }, ["Hello React~"])
//   ]);
// }

// ---------------------------------

// jsx元素
// 这种写法，更加简洁直观，阅读性更强，浏览器不能识别这种写法
// 安装babel进行编译，也是编译成了React.createElement
// let box = (
//   <div className="box" title="haha">
//     <span>我是一个span</span>
//     <a href="http://www.ml.com">ml</a>
//   </div>
// )

// // 需要有一种能力，给你一种写法，可以转化成另一种写法。
// function DemoA() {
//   // return box
//   return React.createElement('div', { className: "box", title: "haha" }, [
//     React.createElement("span", { key: 1 }, "我是一个span"),
//     React.createElement("a", { key: 2, href: "http://www.ml.com" }, "ml"),
//   ])
// }

// export default DemoA;

// ---------------------------------

let ele1 = <div>我是一个div</div>
let ele2 = React.createElement("div", {}, ["我是一个div"])

console.log(ele1);
console.log(ele2);

function DemoA() {
  return ele2;
}

export default DemoA;